<!--  
  一、vue3的响应式的实现
  在vue3中响应式的实现通过两种方式实现
  1、ref:定义基本类型的响应式
  2、reactive
  二、ref的使用步骤
  第1步：在vue依赖包中导入ref函数
  import {ref} from 'vue'
  第2步：调用ref来定义响应式数据
  let 响应式变量=ref<类型>(初始值)
  第3步：使用
  在js代码部分使用：对 响应式变量.value进行更新，而<template>部分不要使用value
  三、reactive的使用
-->
 <template>
    <div>
      <h1>计数器</h1>
      <div>{{num}}</div>
      <button @click="increment">+</button>
    </div>
 </template>
 <script lang="ts" setup>
   import {ref} from 'vue'
   let num=ref<number>(0)
   const increment=()=>{
     num.value++
   }
 </script>
 <style></style>